<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>复选框全选/全不选</title>
    <link rel="stylesheet" type="text/css" href="../../common/sui.css">
    <style type="text/css">
        .box {
            width: 500px;
            margin: 20px auto 0;
            padding: 40px 20px;
        }
    </style>
</head>

<body>
    <form class="box sui-form form-horizontal sui-validate" id="box5">
        <div class="control-group">
            <label for="text" class="control-label v-top">你爱好的运动是:</label>
            <div class="controls">
                <input type="checkbox" id="checkedAll" />全选/全不选<br /><br />
                <input type="checkbox" name="items2" value="足球" />足球
                <input type="checkbox" name="items2" value="篮球" />篮球
                <input type="checkbox" name="items2" value="羽毛球" />羽毛球
                <input type="checkbox" name="items2" value="乒乓球" />乒乓球
            </div>
        </div>
    </form>
    <script type="text/javascript" src="../../common/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script type="text/javascript">
        $.checkedAll($(".box #checkedAll"), $(".box [name=items2]:checkbox"));
    </script>
</body>

</html>